<template>
  <div class="app-container">
    <CustomForm
      class="search-form"
      :form-data="formData"
      :submit-event="submitEvent"
      :form-items="searchItem"
      :reset-event="resetEvent"
      @collapse="collapseEvent"
    >
      <template #artcleName="{ data, items }">
        <vxe-input
          :size="items.size"
          :style="{ width: items.width }"
          :placeholder="items.placeholder"
          v-model="data.artcle_name"
        ></vxe-input>
      </template>
      <template #numName="{ data, items }">
        <vxe-input
          :size="items.size"
          :style="{ width: items.width }"
          :placeholder="items.placeholder"
          v-model="data.num_name"
        ></vxe-input>
      </template>
    </CustomForm>

    <TableCellPopover
      ref="popoverRef"
      :show-columns="showColumns"
      :show-fields="showFields"
      placement="right"
      :width="300"
    >
    </TableCellPopover>

    <CustomVxeTable
      id="ordersTable"
      class="my-table"
      :height="tableHeight"
      :data="tableData"
      :is-show-toolbar="true"
      :is-show-pager="tableData.length > 0"
      :page-config="pageConfig"
      :handleRefresh="getFetchData"
      @page-change="handlePageChange"
      @cell-click="cellClickEvent"
      @cell-mouseenter="handleCellMouseEnter"
      @cell-mouseleave="handleCellMouseLeave"
      :custom-config="{ storage: true, mode: 'drawer', checkMethod: checkMethod }"
    >
      <!-- 左侧按钮操作 -->
      <template #toolbarButtons>
        <vxe-button status="primary">新增</vxe-button>
        <vxe-button>删除</vxe-button>
        <vxe-button>保存</vxe-button>
      </template>

      <!-- 右侧按钮操作 -->
      <template #toolbarTools>
        <a href="#" title="Email">
          <vxe-button style="margin-right: 12px" icon="vxe-icon-envelope-fill" circle />
        </a>
      </template>

      <!-- 动态列插槽 -->
      <template #columns>
        <vxe-column v-if="columns.length > 0" field="checkbox" fixed="left" type="checkbox" width="60" />
        <template v-for="(item, index) in columns" :key="item.field || index">
          <vxe-column v-if="item.title === 'N'" :title="item.title" :field="item.field" width="50">
            <template #default="{ row }">
              <vxe-button
                mode="text"
                :icon="row.N ? 'vxe-icon-feedback' : 'vxe-icon-minus'"
                @click="handleNotesEvent(row)"
              />
            </template>
          </vxe-column>
          <vxe-column v-else-if="item.title === 'Number'" :title="item.title" :field="item.field" width="150">
            <template #header="{ column }">
              <div style="text-align: center">{{ column.field }}</div>
              <vxe-input v-model="headerSex" style="width: 100%; margin-bottom: 2px" placeholder="please input" />
            </template>
            <template #default="{ row }">
              <span v-if="row.Number" class="clickable-number">
                <i class="el-icon-document-copy common-copy-icon" />
                <b> {{ row.Number }}</b>
              </span>
            </template>
          </vxe-column>

          <vxe-column
            v-else
            :title="item.title"
            :field="item.field"
            :sortable="item.sortable"
            :min-width="item.minWidth"
          />
        </template>
      </template>

      <!-- 动态操作列插槽 -->
      <template #actionColumn>
        <vxe-column title="Controls" width="80" fixed="right" show-overflow>
          <template #default="{ row }">
            <vxe-button mode="text" icon="vxe-icon-edit" @click="handleAddOrEdit(row)" />
            <vxe-button mode="text" icon="vxe-icon-edit" @click="handleAddOrEdit(row)" />
          </template>
        </vxe-column>
      </template>
    </CustomVxeTable>
  </div>
</template>

<script setup>
import searchItem from './config'
import { useTableHeight } from '@/hooks/useTableHeight'
const { tableHeight, calculateTableHeight } = useTableHeight('.app-container', '.search-form')
const headerSex = ref('')
import TableCellPopover from '@/components/TableCellPopover/index.vue'

defineOptions({
  // 命名当前组件
  name: 'Vxetable'
})

const formData = reactive({
  date: '',
  type_key: '',
  artcle_name: '',
  num_name: '',
  supplier_trading_name_like: '',
  supplier_name_like: '',
  abn_like: '',
  supplier_code_like: '',
  phone_like: '',
  email_address_like: '',
  category_like: '',
  a_like: '',
  b_like: '',
  c_like: '',
  d_like: ''
})

const tableData = ref(
  Array.from({ length: 50 }, (_, i) => ({
    id: 10001 + i,
    name: `Test${i + 1}`,
    role: i % 4 === 0 ? 'Developer' : i % 4 === 1 ? 'Tester' : i % 4 === 2 ? 'PM' : 'Designer',
    sex: i % 2 === 0 ? 'Man' : 'Woman',
    age: Math.floor(Math.random() * 10) + 20, // 随机年龄，20-29
    address: i % 2 === 0 ? 'Guangzhou' : 'Shanghai',
    N: Math.random() > 0.5, // 随机布尔值
    Number: `123456${i.toString().padStart(4, '0')}` // 生成唯一的号码
  }))
)

const popoverRef = ref(null)

const handleCellMouseEnter = params => {
  popoverRef.value?.handleCellMouseEnter(params)
}

const handleCellMouseLeave = params => {
  popoverRef.value?.handleCellMouseLeave(params)
}

const columns = ref([
  { title: 'Number', field: 'Number', minWidth: 60, showPopover: true },
  { title: 'N', field: 'N', minWidth: 60, showPopover: false },
  { title: 'name', field: 'name', minWidth: 60, showPopover: true },
  { title: 'role', field: 'role', minWidth: 50, showPopover: true },
  { title: 'sex', field: 'sex', sortable: true, minWidth: 120, showPopover: true },
  { title: 'age', field: 'age', sortable: true, minWidth: 120, showPopover: true },
  { title: 'address', field: 'address', sortable: true, minWidth: 120, showPopover: true }
])

const showColumns = computed(() => {
  return columns.value.filter(item => item.showPopover).map(item => item.field)
})

const showFields = computed(() => {
  return columns.value.filter(item => item.showPopover).map(item => item.field)
})

const pageConfig = reactive({
  pageSize: 50,
  currentPage: 1,
  total: 100
})

const handleNotesEvent = row => {
  console.log('Notes clicked:', row)
}

const handleAddOrEdit = row => {
  console.log('Edit clicked:', row)
}

const handlePageChange = ({ currentPage, pageSize }) => {
  console.log('Page change:', currentPage, pageSize)
}

const cellClickEvent = () => {
  console.log('cellClickEvent')
}

const submitEvent = () => {
  console.log('submitEvent')
  console.log('formData>>>→➡️➡️➡️', formData)
}
const checkMethod = ({ column }) => {
  return !['checkbox'].includes(column.field)
}

const getFetchData = () => {
  console.log('getFetchData')
}

const resetEvent = () => {
  console.log('resetEvent')
  formData.date = ''
  formData.type_key = ''
  formData.artcle_name = ''
  formData.num_name = ''
  formData.supplier_trading_name_like = ''
  formData.supplier_name_like = ''
  formData.abn_like = ''
  formData.supplier_code_like = ''
  formData.phone_like = ''
  formData.email_address_like = ''
  formData.category_like = ''

  formData.a_like = ''
  formData.b_like = ''
  formData.c_like = ''
  formData.d_like = ''
}

const collapseEvent = () => {
  calculateTableHeight()
}
</script>
<style lang="scss" scoped></style>
